<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;

        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
        .el-table__header tr,
        .el-table__header th {
            padding: 0;
            height: 30px;
            line-height: 30px;
        }
        .el-table__body tr,
        .el-table__body td {
            padding: 0;
            height: 80px;
            line-height: 80px;
        }
    </style>
</head>
<body>
<div id="my">
    <el-container>
        <el-header>
            <el-row :gutter="20">
                <el-col :span="12" :offset="6"><div class="grid-content bg-purple">
                    <template>
                        <el-select v-model="name" clearable placeholder="部门" @change="listDep">
                            <el-option
                                    v-for="item in departmentone"
                                    :key="item.id"
                                    :label="item.dname"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                    <template>
                    <el-select v-model="input.id" clearable placeholder="科室" >
                        <el-option
                                v-for="item in departmenttwo"
                                :key="item.id"
                                :label="item.oname"
                                :value="item.id"
                        >
                        </el-option>
                    </el-select>
                    </template>
                    <el-button icon="el-icon-search" circle @click="listDoc"></el-button>
                </div></el-col>
            </el-row>
        </el-header>
        <el-main>
            <template>
                <el-table
                        :data="tableData"
                        border
                        :header-cell-style="{textAlign:'center'}"
                        :cell-style="{textAlign:'center'}"
                        style="width: 100%">
                    <el-table-column
                            label="姓名"
                            min-width="150">
                        <template slot-scope="scope">
                            <el-button @click="doctorDetails(scope.row.id)" type="text" size="small">{{scope.row.aname}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="oname"
                            label="科室"
                            min-width="150">
                    </el-table-column>
                    <el-table-column
                            :label="dateTitle.oneDay"
                            min-width="120">
                        <template slot-scope="scope">
                            <el-tag
                                    :key="aa.eid"
                                    v-for="aa in scope.row.dem"
                                    v-if="aa.registrationdate==dateTitle.oneDay"
                            >
                                价格:{{aa.price}}元
                                <div v-if="aa.upname!=0">上午号码:{{aa.upname}}</div>
                                <div v-if="aa.downname!=0">下午号码：{{aa.downname}}</div>
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            :label="dateTitle.twoDay"
                            min-width="120">
                        <template slot-scope="scope">
                            <el-tag
                                    :key="bb.eid"
                                    v-for="bb in scope.row.dem"
                                    v-if="bb.registrationdate==dateTitle.twoDay"
                            >
                                价格:{{bb.price}}元
                                <div v-if="bb.upname!=0">上午号码:{{bb.upname}}</div>
                                <div v-if="bb.downname!=0">下午号码：{{bb.downname}}</div>
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            :label="dateTitle.threeDay"
                            min-width="120">
                        <template slot-scope="scope">
                            <el-tag
                                    :key="cc.eid"
                                    v-for="cc in scope.row.dem"
                                    v-if="cc.registrationdate==dateTitle.threeDay"
                            >
                                价格:{{cc.price}}元
                                <div v-if="cc.upname!=0">上午号码:{{cc.upname}}</div>
                                <div v-if="cc.downname!=0">下午号码：{{cc.downname}}</div>
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            :label="dateTitle.fourDay"
                            min-width="120">
                        <template slot-scope="scope">
                            <el-tag
                                    :key="dd.eid"
                                    v-for="dd in scope.row.dem"
                                    v-if="dd.registrationdate==dateTitle.fourDay"
                            >
                                价格:{{dd.price}}元
                                <div v-if="dd.upname!=0">上午号码:{{dd.upname}}</div>
                                <div v-if="dd.downname!=0">下午号码：{{dd.downname}}</div>
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            :label="dateTitle.fiveDay"
                            min-width="120">
                        <template slot-scope="scope">
                            <el-tag
                                    :key="ee.eid"
                                    v-for="ee in scope.row.dem"
                                    v-if="ee.registrationdate==dateTitle.fiveDay"
                            >
                                价格:{{ee.price}}元
                                <div v-if="ee.upname!=0">上午号码:{{ee.upname}}</div>
                                <div v-if="ee.downname!=0">下午号码：{{ee.downname}}</div>
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            :label="dateTitle.sixDay"
                            min-width="120">
                        <template slot-scope="scope">
                            <el-tag
                                    :key="ff.eid"
                                    v-for="ff in scope.row.dem"
                                    v-if="ff.registrationdate==dateTitle.sixDay"
                            >
                                价格:{{ff.price}}元
                                <div v-if="ff.upname!=0">上午号码:{{ff.upname}}</div>
                                <div v-if="ff.downname!=0">下午号码：{{ff.downname}}</div>
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            :label="dateTitle.sevenDay"
                            min-width="120">
                        <template slot-scope="scope">
                            <el-tag
                                    :key="gg.eid"
                                    v-for="gg in scope.row.dem"
                                    v-if="gg.registrationdate==dateTitle.sevenDay"
                            >
                                价格:{{gg.price}}元
                                <div v-if="gg.upname!=0">上午号码:{{gg.upname}}</div>
                                <div v-if="gg.downname!=0">下午号码：{{gg.downname}}</div>
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            min-width="150">
                        <template slot-scope="scope">
                            <el-button @click="showAddRegistered(scope.row.id)" type="text" size="small">挂号</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-main>
    </el-container>
    <div class="block">
        <span class="demonstration">显示总数</span>
        <el-pagination
                @current-change="handleCurrentChange"
                :page-size="7"
                layout="total, prev, pager, next"
                :total="sum">
        </el-pagination>
    </div>
    <el-dialog title="请选择" :visible.sync="dialogFormVisible">
        <el-form :model="input" ref="input" :rules="rules">
            <el-form-item label="部门" >
                <el-select v-model="name"  placeholder="部门" @change="listDep">
                    <el-option
                            v-for="a in departmentone"
                            :key="a.id"
                            :label="a.dname"
                            :value="a.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="科室" >
                <el-select v-model="input.id" placeholder="科室" >
                    <el-option
                            v-for="b in departmenttwo"
                            :key="b.id"
                            :label="b.oname"
                            :value="b.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="listDoc">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="挂诊" :visible.sync="addReg">
        <el-form :model="addform" ref="addform" :rules="rules">
            <el-form-item label="日期" >
                <el-select v-model="addform.dateid" placeholder="请选择时间" >
                    <el-option
                            v-for="c in registeredDate"
                            :key="c.id"
                            :label="c.registrationdate"
                            :value="c.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="时段" :label-width="formLabelWidth">
                <el-select v-model="addform.day" placeholder="请选择时段">
                    <el-option label="上午" value="0"></el-option>
                    <el-option label="下午" value="1"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addReg = false">取 消</el-button>
            <el-button type="primary" @click="addRegistered">挂号</el-button>
        </div>
    </el-dialog>
    <el-dialog
            :visible.sync="showDoctorDetails"
            width="60%"
            :before-close="handleClose">
			  <span>
				  <el-descriptions size="mini" title="医生简介" direction="vertical" :column="2" border>
				    <el-descriptions-item label="姓名">{{listDoctorDetails.aname}}</el-descriptions-item>
					<el-descriptions-item label="性别">{{listDoctorDetails.asex}}</el-descriptions-item>
                    <el-descriptions-item label="职位">{{listDoctorDetails.rname}}</el-descriptions-item>
					<el-descriptions-item label="学历" >{{listDoctorDetails.education}}</el-descriptions-item>
				    <el-descriptions-item label="成就":span="2">{{listDoctorDetails.aachievement}}</el-descriptions-item>
				  </el-descriptions>
			  </span>
    </el-dialog>
</div>
<script>

    var he=new Vue({
        el:"#my",
        data:{
            rules:{
                id: [
                    { required: true, message: '请选择医生', trigger: 'blur' },
                ],
                dateid: [
                    { required: true, message: '请选择医生', trigger: 'blur' },
                ],
                period: [
                    { required: true, message: '请选择医生', trigger: 'blur' },
                ],
            },
            dialogFormVisible:true,
            departmentone:[],
            name:'',
            departmenttwo:[],
            input:{},
            dateTitle:{'':''},
            tableData:[],
            sum:'',
            addReg:false,
            registeredDate:[],
            addform:{},
            msg:'',
            showDoctorDetails:false,
            listDoctorDetails:{},
        },
        methods:{
            handleCurrentChange(val) {
                getList(val,7)
            },
            listDoc(){
                getList(1,7);
            },
            listDep(){
                $.get("/demo/hang/listDepTwo/"+he.name,function (backData) {
                    he.departmenttwo=backData.data;
                })
            },
            showAddRegistered(id){
                he.addReg=true;
                he.addform.aid=id;
                $.get("/demo/sch/getSch",function (backData) {
                    if(backData.code==1){
                        he.registeredDate=backData.data;
                    }
                })
            },
            addRegistered(){
                $.post("/demo/reg/get",he.addform,function (backData) {
                    he.msg=backData.msg;
                    if(backData.code==0){
                        he.$message({
                            showClose: true,
                            message: he.msg,
                            type: 'warning'
                        });
                    }else if(backData.code==1){
                        $.get("/demo/reg/getInfo",function (backData) {
                            he.msg=backData.msg;
                            if(backData.code==0){
                                he.$message({
                                    showClose: true,
                                    message: he.msg,
                                    type: 'warning'
                                });
                                window.location.href="/demo/userr/personalInfo.html"
                            }else{
                                $.post("/demo/reg/ver",he.addform,function (backData) {
                                    he.msg=backData.msg;
                                    if(backData.code==1){
                                        he.addform.state=0;
                                        if(confirm("确定支付么")){
                                            location.href="/demo/si/play?aid="+he.addform.aid+"&dateid="+he.addform.dateid+"&day="+he.addform.day+"&state=1";
                                        }else{
                                            $.post("/demo/reg/addplay",he.addform,function (backData) {
                                                he.addReg=false;
                                                getList(1,7);
                                                window.location.href="/demo/userr/userResult.html";
                                            })
                                        }

                                    }else{
                                        he.$message({
                                            showClose: true,
                                            message: he.msg,
                                            type: 'warning'
                                        });
                                    }
                                })
                            }
                        })


                    }
                })

            },
            doctorDetails(id){
                he.showDoctorDetails=true;
                $.get("/demo/reg/getAdminInfo/"+id,function (backData) {
                    he.listDoctorDetails=backData.data;
                })
            }
        }
    })

        $.get("/demo/hang/listDepOne",function (backData) {
            he.departmentone=backData.data;
        });
    function getList(a,b) {
        he.input.page=a;
        he.input.pageCount=b;
        $.post("/demo/reg/listAll",he.input,function (backData) {
            if(backData.code==1){
                he.dateTitle=backData.data.titleData;
                he.tableData=backData.data.listDoctorAll;
                he.sum=backData.data.listSum;
                he.dialogFormVisible=false;
            }
        })
    }
</script>
</body>
</html>